    <!-- 头部 -->
    <header class="top-bar">
        <!-- 滚动消息 -->
        <div class="top-notice">
            <div class="mall-mind">
                <div class="fl iconfont icon-shengyin"></div>
                <div class="fl notice-txt">
                    <ul style="margin-top: 0">
                        <li>
                            pubg周边商城上线了~,
                            <a href="http://pubg.qq.com/mall/notice_detail.shtml?noticeid=1715" target="_blank">点击查看详情></a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
        <!-- 登录搜索 -->
        <div class="top-info">
            <div class="fl loginbar">
                <!-- 登录前 -->
                <div class="unlogin" style="display: block;">
                    <i class="iconfont icon-denglu-weixuanzhong"></i>
                    <a href="#">立即登录</a>
                </div>
                <!-- 登录后 -->
                <div class="loginbox" style="display: none;">
                    <div class="login-info">
                        <div class="fl hdimg">
                            <img src="/img/2020-05-14 20-53-30.jpg" alt="头像">
                        </div>
                        <p class="fl hdname">黄以蚊</p>
                    </div>
                    <div class="top-hover" style="display: block;">
                        <div class="arrow"></div>
                        <div class="linklist">
                            <a href="#" title="订单管理" target="_blank">
                                <i class="fl iconfont icon-dingdan"></i>
                                <span>订单管理</span>
                            </a>
                            <a href="#" title="地址管理" target="_blank">
                                <i class="fl iconfont icon-dizhi"></i>
                                <span>地址管理</span>
                            </a>
                            <a href="#" title="优惠卡券" target="_blank">
                                <i class="fl iconfont icon-youhuiquan"></i>
                                <span>优惠卡券</span>
                            </a>
                            <a href="#" title="我的收藏" target="_blank">
                                <i class="fl iconfont icon-dizhi"></i>
                                <span>我的收藏</span>
                            </a>
                            <a href="#" title="订阅管理" target="_blank">
                                <i class="fl iconfont icon-dingyue"></i>
                                <span>订阅管理</span>
                            </a>
                            <a href="#" title="领取中心" target="_blank">
                                <i class="fl iconfont icon-lingdang"></i>
                                <span>领取中心</span>
                            </a>
                            <a href="#" title="退出登录" target="_blank">
                                <i class="fl iconfont icon-lingdang"></i>
                                <span>退出登录</span>
                            </a>
                        </div>
                    </div>
                </div>
            </div>
            <!-- logo -->
            <div class="logo-imgbox">
                <a href="https://pubg.qq.com/" target="_blank">
                    <img src="/img/logo-pubg.png" alt="" width="108px" height="55px" alt="pubg">
                </a>
            </div>
            <!-- 搜索 -->
            <div class="fr sosobox">
                <input class="top-soso" type="text" placeholder="请输入想要找的宝贝">
                <a href="#" class="btn-search" title="搜索">
                    <i class="iconfont icon-search"></i>
                </a>
            </div>
        </div>
        <!-- 导航栏 -->
        <div class="top-head">
            <div class="top-menu">
                <a href="#" class="fl all-class" title="sahngpin" target="_blank">
                    <i class="iconfont icon-quanbu"></i>
                    <span>全部商品</span>
                </a>
                <ul>
                    <li>
                        <a href="http://localhost:2400/" title="首页" target="_blank">首页</a>
                    </li>
                    <li>
                        <a href="http://localhost:2400/html/list.html" title="周年专区" target="_blank">周年专区</a>
                    </li>
                    <li>
                        <a href="http://localhost:2400/html/list.html" title="精彩活动" target="_blank">精彩活动</a>
                    </li>
                    <li>
                        <a href="http://localhost:2400/html/list.html" title="显示折扣" target="_blank">限时折扣</a>
                    </li>
                    <li>
                        <a href="http://localhost:2400/html/list.html" title="聚豆抵扣2" target="_blank">聚豆抵扣2</a>
                    </li>
                </ul>
                <!-- 购物车 -->
                <div class="fr car">
                    <a href="">
                        <i class="iconfont icon-gouwuchekong"></i>
                        <span>购物车</span>
                        <em>(0)</em>
                    </a>
                </div>
            </div>
        </div>
    <header>
    <!-- 回到顶部 -->
    <div class="topnav">
        <a href="#">
            
         <div class="top">
             <span class="iconfont icon-shangsanjiaoxing"></span>
             <p>top</p>
         </div>
         <div class="top1">
             <p>返回顶部</p>
         </div>
        </a>
         
     </div>
     <!-- 登录注册页面 -->
     <div class="login-page" style="display: none;">
         <div class="login">
             <!-- 关闭登陆页面 -->
             <a href="" class="close">
                 X
             </a>
             <ul class="login-top">
                 <li>
                     <a href="" class="qq">
                         <i class="iconfont icon-QQ"></i>
                         <span>QQ账号登录</span>
                     </a>
                 </li>
                 <li>
                     <a href="" class="wx">
                         <i class="iconfont icon-xin"></i>
                         <span>微信账号登录</span>
                     </a>
                 </li>
             </ul>
             <div class="login-note">
                 微信和QQ是两个独立账号，账户信息不互通
             </div>
             <div class="login-qq">
                 <!-- 快速安全登录 -->
                 <div class="fast" style="display: block;">
                     <div class="box">
                         <h3>
                             快速安全登录
                         </h3>
                         <p>
                             请使用
                             <a href="https://im.qq.com/mobileqq/#from=login" target="_blank">扣扣手机版</a>
                             扫描二维码
                             <br>
                             安全登录，防止盗号。
                         </p>
                         <div>
                             <img src="./img/jcp_gzh.jpg" alt="">
                         </div>
                         <ul>
                             <li>
                                 <a href="">账号密码登录</a>
                             </li>
                             <li>
                                 <a href="https://ssl.zc.qq.com/v3/index-chs.html?from=pt" target="_blank">注册新账号</a>
                             </li>
                             <li>
                                 <a href="https://support.qq.com/products/14800" target="_blank"> 意见反馈</a>
                             </li>
                         </ul>
                     </div>
                 </div>
                 <!-- 账号密码登录 -->
                 <div class="fast pd" style="display: none;">
                     <div class="box ">
                         <h3>
                             账号密码登录
                         </h3>
                         <p>
                             推荐使用
                             <a href="https://im.qq.com/mobileqq/#from=login" target="_blank">快速安全登录</a>
                             防止盗号
                             
                         </p>
                         <form action="">
                             <input type="text" placeholder="支持扣扣号/邮箱/手机号登录">
                             <input type="text" placeholder="密码">
                             <button>登 录</button>
                         </form>
                         <ul>
                             <li>
                                 <a href="">忘记密码？</a>
                             </li>
                             <li>
                                 <a href="https://ssl.zc.qq.com/v3/index-chs.html?from=pt" target="_blank">注册新账号</a>
                             </li>
                             <li>
                                 <a href="https://support.qq.com/products/14800" target="_blank"> 意见反馈</a>
                             </li>
                         </ul>
                     </div>
                 </div>
                 <!-- 微信登录 -->
                 <div class="login-wx" style="display: none;">
                     <h3>
                         微信登录
                     </h3>
                     <div>
                         <img src="./img/jcp_gzh.jpg" alt="">
                     </div>
                     <p>请使用微信扫描二维码登录</p>
                     <p>"聚诚品"</p>
                 </div>
                 
             </div>
         </div>
     </div>